

<template>
    <div class="px-8 py-6">
        <navigation></navigation>
        <div class="min-w mx-auto">
            <div class="achievement-card p-6 flex">
                <div class="w-1/3">
                    <div class="flex items-center mb-4">
                        <i class="iconfont icon-zhengshu" style="font-size: 1.3rem; color: #1296db;"></i>&nbsp;
                        <h2 class="text-lg font-medium" style="font-weight: bold;">资格证书</h2>
                    </div>
                    <div class="space-y-3">
                        <div class="p-3 bg-blue-50 rounded">
                            <div class="font-medium">高级数据分析师认证</div>
                            <div class="text-sm text-gray-600 mt-1">北京信息技术研究院</div>
                        </div>
                        <div class="p-3 bg-blue-50 rounded">
                            <div class="font-medium">Python 开发工程师</div>
                            <div class="text-sm text-gray-600 mt-1">中国软件协会</div>
                        </div>
                    </div>
                </div>
                <div class="w-1/3 flex justify-center items-start">
                    <img src="../../assets/img/portrait.jpg" class="w-32 h-32 object-cover" />
                </div>
                <div class="w-1/3">
                    <div class="flex items-center mb-4">
                        <i class="iconfont icon-jiangbei" style="font-size: 1.3rem; color: #1296db;"></i>&nbsp;
                        <h2 class="text-lg font-medium" style="font-weight: bold;">比赛证书</h2>
                    </div>
                    <div class="space-y-3">
                        <div class="p-3 bg-blue-50 rounded">
                            <div class="font-medium">人工智能应用开发</div>
                            <div class="text-sm text-gray-600 mt-1">完成时间：2023-12-15</div>
                        </div>
                        <div class="p-3 bg-blue-50 rounded">
                            <div class="font-medium">大数据分析与应用</div>
                            <div class="text-sm text-gray-600 mt-1">完成时间：2023-10-20</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="chart-wrapper">
                <div class="flex justify-between items-center mb-6">
                    <div>
                        <div class="flex items-center mb-4">
                            <i class="iconfont icon-shujufenxi" style="font-size: 1.6rem; color: #1296db;"></i>&nbsp;
                            <h2 class="text-lg font-medium" style="font-weight: bold;">学业表现趋势</h2>
                        </div>
                        <p class="text-sm text-gray-500 mt-1">大学期间各学期绩点变化情况</p>
                    </div>

                    <div class="flex items-center space-x-4">
                        <el-button type="primary" size="small" class="!rounded-button whitespace-nowrap">
                            <i class="iconfont icon-daochu" style="font-size: 1rem; color: #ffffff;"></i> 导出数据
                        </el-button>
                    </div>
                </div>
                <div ref="performanceChartRef" style="width: 100%; height: 300px;"></div>
            </div>

            <div class="ability-charts">
                <div class="ability-card">
                    <div class="flex items-center mb-4">
                        <i class="iconfont icon-zhishi" style="font-size: 1.3rem; color: #1296db;"></i>&nbsp;
                        <h3 class="text-base font-medium" style="font-weight: bold;">知识掌握分布</h3>
                    </div>
                    <div ref="knowledgeChartRef" style="width: 100%; height: 300px;"></div>
                </div>
                <div class="ability-card">
                    <div class="flex items-center mb-4">
                        <i class="iconfont icon-RectangleCopy" style="font-size: 1.4rem; color: #1296db;"></i>&nbsp;
                        <h3 class="text-base font-medium" style="font-weight: bold;">核心能力雷达</h3>
                    </div>
                    <div ref="skillChartRef" style="width: 100%; height: 300px;"></div>
                </div>
                <div class="ability-card">
                    <div class="flex items-center mb-4">
                        <i class="iconfont icon-huodong" style="font-size: 1.4rem; color: #1296db;"></i>&nbsp;
                        <h3 class="text-base font-medium" style="font-weight: bold;">活动规模分布</h3>
                    </div>
                    <div ref="timeChartRef" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import navigation from "../../views/navigation.vue"
const avatarUrl = 'src/assets/img/portrait.jpg';

const performanceChartRef = ref<HTMLElement | null>(null);
const knowledgeChartRef = ref<HTMLElement | null>(null);
const skillChartRef = ref<HTMLElement | null>(null);
const timeChartRef = ref<HTMLElement | null>(null);

let performanceChart: echarts.ECharts | null = null;
let knowledgeChart: echarts.ECharts | null = null;
let skillChart: echarts.ECharts | null = null;
let timeChart: echarts.ECharts | null = null;

onMounted(() => {
    if (performanceChartRef.value) {
        performanceChart = echarts.init(performanceChartRef.value);
        performanceChart.setOption({
            animation: false,
            grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                boundaryGap: false
            },
            yAxis: { type: 'value' },
            series: [{
                data: [85, 88, 87, 90, 89, 92, 91, 93, 92, 94, 93, 95],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(74, 144, 226, 0.3)' },
                        { offset: 1, color: 'rgba(74, 144, 226, 0.1)' }
                    ])
                },
                lineStyle: { color: '#4A90E2' },
                itemStyle: { color: '#4A90E2' }
            }]
        });
    }

    if (knowledgeChartRef.value) {
        knowledgeChart = echarts.init(knowledgeChartRef.value);
        knowledgeChart.setOption({
            animation: false,
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    { value: 35, name: '编程基础' },
                    { value: 25, name: '数据分析' },
                    { value: 20, name: '算法设计' },
                    { value: 20, name: '项目实践' }
                ],
                emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
            }]
        });
    }

    if (skillChartRef.value) {
        skillChart = echarts.init(skillChartRef.value);
        skillChart.setOption({
            animation: false,
            radar: {
                indicator: [
                    { name: '问题分析', max: 100 },
                    { name: '技术实现', max: 100 },
                    { name: '团队协作', max: 100 },
                    { name: '创新能力', max: 100 },
                    { name: '学习效率', max: 100 }
                ]
            },
            series: [{
                type: 'radar',
                data: [{
                    value: [85, 90, 88, 82, 95],
                    areaStyle: { color: 'rgba(74, 144, 226, 0.2)' },
                    lineStyle: { color: '#4A90E2' },
                    itemStyle: { color: '#4A90E2' }
                }]
            }]
        });
    }

    if (timeChartRef.value) {
        timeChart = echarts.init(timeChartRef.value);
        timeChart.setOption({
            animation: false,
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    { value: 40, name: '在线课程' },
                    { value: 30, name: '实践练习' },
                    { value: 20, name: '资料阅读' },
                    { value: 10, name: '小组讨论' }
                ],
                emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
            }]
        });
    }

    const handleResize = () => {
        performanceChart?.resize();
        knowledgeChart?.resize();
        skillChart?.resize();
        timeChart?.resize();
    };

    window.addEventListener('resize', handleResize);

    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        performanceChart?.dispose();
        knowledgeChart?.dispose();
        skillChart?.dispose();
        timeChart?.dispose();
    });
});
</script>

<style scoped>
body {
    background-color: #F5F7FA;
    min-height: 1024px;
}

.achievement-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-wrapper {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ability-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.ability-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.min-w {
    min-width: 1280px;
}

.px-8 {
    padding-left: 0;
    padding-right: 0;
}

.w-32 {
    width: 12rem;
}

.h-32 {
    height: 12rem;
}

.py-6 {
    padding-top: 0;
    padding-bottom: 0;
}
</style>

